<template>
  <div class="title" :class="open" @click="onopen()" >{{title}}</div>
  </template>
  
  <script>
  export default {
  name:"tag",
  data(){
    return{
        open:""
    }
  },
  props:["title"],
  methods: {
    onopen(){
        if(this.open==""){
            this.open="opened"
        }else{
            this.open=""
        }

    }
        
    },
  }
  </script>
  
  <style scoped>
.title{
    margin-bottom: 10px;
    width: 20%;
    height: 100px;
    background-color: bisque;
    transition:all 0.5s;
    transition-timing-function: ease-in-out;
}
.opened{
    width: 100%;
    background-color: rgb(125, 184, 0);
}
  </style>>